<template lang="html">
  <div class="main-page" id="store-page">
    <nav-bar :title="title"  @goBack="onClickLeft"/>
    <div class="equity">
      <van-tabs class="equity_tabs" v-model="active" :line-height="0" :ellipsis="false" @click="tabChange">
        <van-tab v-for="(index, k) in equity_list" v-bind:key="k"  @click="tabChange">
          <div slot="title" :class=" active === k ? 'equity_item active' : 'equity_item'">
            <span :class="'icon_' +  Number(k + 1) "></span>
            <p>{{index}}</p>
          </div>
        </van-tab>
      </van-tabs>
      <swiper :options="swiperOption" ref="mySwiper" @slideChangeTransitionStart="swiperChange">
        <swiper-slide  v-for="(index, k) in equity_list" :class="active === k ? 'active':''" v-bind:key="k">
          <div class="qeuity_content">
            <div :class="'content_item ' + 'item_' + Number(k + 1)">
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import NavBar from '@/components/global/nav-bar.vue'
// import Tool from '@/utils/tool.js'
export default {
  components: { NavBar, swiper, swiperSlide },
  data () {
    return {
      id: this.$route.query.id,
      title: '超级会员12大权益',
      active: 0,
      equity_list: ['购物省钱', '分享赚钱', '超值优惠券', '专属折扣', '购物积分', '每月免邮券', '免费试用', '专享秒杀', '亲友邀请卡', '免费培训', '专属导师', '无需囤货'],
      swiperOption: {
        spaceBetween: -75
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  created () {
    if (this.id) {
      this.active = this.id
      setTimeout(item => {
        this.tabChange(this.id)
      }, 300)
    }
  },
  mounted () {
    // this.swiper.slideTo(8, 1000, false)
  },
  methods: {
    onClickLeft () {

    },
    tabChange (e) {
      this.swiper.slideTo(e, 1000, false)
    },
    swiperChange (e) {
      this.active = this.swiper.activeIndex
    }
  }
}
</script>

<style lang="css" scoped>
</style>
